<!DOCTYPE HTML>
<html>
<head>
  <title>课程详情</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="css/style.css" rel="stylesheet" type="text/css"  media="all" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href="css/slider.css" rel="stylesheet" type="text/css"  media="all" />
  <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
  <script type="text/javascript">
    $(window).load(function() {
        /*解析网页中传递过来的id*/
		var thisURL=document.URL;
		thisURL=thisURL.split('?')[1];
		var courseid=thisURL.split("&")[0].split("=")[1];
		var clubid=thisURL.split("&")[1].split("=")[1];
        var path = "/" + location.pathname.split("/")[1];
        $.post(path+"/S_getImage",function (data) {
            console.log(data);
            $.each(data,function (i,li) {
                console.log(li.imagePath);
                $("#slider").append(
                    '<img src="'+path+"/"+li.imagePath+'" data-thumb="'+path+"/"+li.imagePath+'"  alt="" />'
                );
            });
            $('#slider').nivoSlider();
        },'json');
		/*根据课程id 查询对应课程的详细信息*/
		$.get(path+"/S_getCourseById",{"courseId":courseid},function (date) {
			console.log(date);
            $("#course").append(
            '<div class="wrap">'+
                '<div class="about-topgrid1">'+
                '<h3>'+date.courseName+'</h3>'+
                '<img src="'+date.courseImg+'" alt=""style="width: 300px;height: 190px"/>'+
                '<span>类型</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseCatagory+'</span><br>'+
            '<span>价格</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.coursePrice+'</span><br>'+
            '<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseTeacher+'</span><br>'+
            '</div>'+
            '<div class="about-services">'+
                '<h3>课程信息</h3>'+
                '<span>剩余</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseRemainNum +'</span><br>'+
            '<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseDifficulty+'</span><br>'+
            '<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseDate+'</span><br>'+
            '<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseTime+'</span><br>'+
            '<span>场馆</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>青云</span><br>'+
            '<span>教室</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>'+date.courseClassroom+'</span><br>'+
            '<span>会员卡</span>&nbsp;&nbsp;&nbsp;<select id="vipselect">'+
            '</select><br>'+
                '<form id="courseform" action="/SWT/S_aboutcourse">'+
            '<span>添加备注（非必填）</span><br>'+
            '<textarea name="aboutcourseNote"></textarea>'+
                '<input type="text" hidden name="aboutcourseCourseid" value="'+courseid+'">'+
                '<input type="text" hidden name="aboutcourseClubid" value="'+clubid+'">'+
                '<input type="text" hidden name="aboutcourseCategory" value="'+date.courseCatagory+'">'+
                '<input type="text" hidden name="aboutcourseDate" value="'+date.courseDate+'">'+
                '<input type="text" hidden name="abourcourseClassroom" value="'+date.courseClassroom+'">'+
                '<input type="text" hidden name="aboutcourseTime" value="'+date.courseTime+'">'+
                '<input type="text" hidden name="aboutcourseName" value="'+date.courseName+'">'+
                '<input type="text" hidden name="aboutcourseImg" value="'+date.courseImg+'">'+
            '<div class="button" id="aboutcourse"><span><a><input type="submit" value="确认预约" id="submit"></a></span></div>'+
                '</form>'+
            '</div>'+
            '<div class="about-histore">'+
                '<h3>课程简介</h3>'+
                '<p>'+date.courseIntroduce+'</p>'+
                '<div class="clear"> </div>'+
                '</div>'+
                '<div class="clear"> </div>'+
                '</div>'
			);
            /*根据课程id找该课程能用的会员卡*/
			$.get(path+"/S_getVipCardByCourseId",{"courseid":courseid},function (date) {
				console.log(date);
				/*此时已经获取了该课程该用户可用的所有会员卡*/
				/*将可用的会员卡添加到会员卡下拉框中*/
				$.each(date["all"],function (i,obj) {
                    $("#vipselect").append(
						'<option>'+obj.vipcardName+':('+obj.vipcardEndtime+')</option>'
                    );
                });
                $.each(date["alone"],function (i,obj) {
                    $("#vipselect").append(
                        '<option>'+obj.vipcardName+':('+obj.vipcardEndtime+')</option>'
                    );
                });
                var uservip=$("#vipselect").find("option:selected").text();
                //如果没有vip卡设置预约button不可用
				if(uservip==""){
				    $("#aboutcourse").attr("disabled", true);
                    $("#submit").attr("disabled", true);
				}
            },"json");
        },"json");
    });
    </script>
 </head>
<body>
	<!----start-header----->
	<!---start-top-nav---->
	 <div class="header">
	     <div class="wrap">
			<div class="top-header">
				<div class="clear"> </div>
			</div>
			<div class="top-nav">
				<div class="top-nav-left">
					<ul>
						<li><a href="person.html">个人信息</a></li>
						<li class="active"><a href="index.html">约个课</a></li>
						<li ><a href="personal.html">约私教</a></li>
						<li><a href="info.html">预约信息</a></li>
						<li><a href="club.html">场馆信息</a></li>
						<li><a href="vipcard.html">我的会员卡</a></li>
						<div class="clear"> </div>
					</ul>
				</div>
				<div class="top-nav-right">
					<div class="telephone">
						<span><i class="phone_img"><img src="images/phone.png" alt="" /></i> CALL</span><span class="number">(800) 234-5678</span>
					</div>
				</div>
				<div class="clear"> </div>
			</div>
			<!---End-top-nav---->
		</div>
	</div>
   <!----End-header----->
	       <!------ Slider ------------>
		     <div class="slider">
	      	  <div class="slider-wrapper theme-default">
	            <div id="slider" class="nivoSlider">
	            </div>
	        </div>
   	    </div>
		<!------End Slider ------------>
		 <!---start-content---->
		 <div class="wrap">
		   <div class="content">	 	 
		       <div class="top-grids">
		 		</div>
			 	    <div class="about_desc" id="course">
		       	       <!--<div class="wrap">
					            <div class="about-topgrid1">
										<h3>课程名称</h3>
										<img src="images/welcome_img2.jpg" alt="" />	

										<span>类型</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>团课</span><br>
										<span>价格</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>100</span><br>
										<span>教练</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>RNG</span><br>				
									</div>					           
					              <div class="about-services">
									<h3>课程信息</h3>
										<span>剩余</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>3人</span><br>
										<span>难度</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>五星</span><br>
										<span>日期</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>2018-11-28</span><br>
										<span>时间</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>10:00-12:00</span><br>
										<span>场馆</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>青云</span><br>
										<span>教室</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>java1807</span><br>
									<span>会员卡</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select>
										<option>季卡</option>
										<option>次卡</option>
									</select><br>
									<span>预约人数</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name=""><br>
									<span>剩余次数</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>100次</span><br>
									<span>添加备注（非必填）</span><br>
									<textarea></textarea>
									<div class="button"><span><a href="about.html">确认预约</a></span></div>
								</div>
								<div class="about-histore">
									<h3>课程简介</h3>
									<p>豪情在天谁能与我争锋<br>青锋在手谁能倚天屠龙<br>中原逐鹿方显英雄本色<br>武林风起自当气吞山河</p>
									<div class="clear"> </div>
								</div>
							<div class="clear"> </div>
			           </div>-->
		   			</div>
			 	</div>
		   	</div><div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div>		   			
		 <!---End-content---->
		 <!---start-footer---->
		  <div class="footer">
		    <div class="wrap">
			   <div class="footer-grid">
				<h3>Location</h3>
				       <div class="address">
						   <ul>
						  	   <li>Neque porro quisquam,</li>
						  	   <li>dolor sit amet,</li>
						  	   <li>USA.</li>
						  	   <li>info(at)yourcompany.com</li>
						  	   <li><span>Telephone :</span> +00 000 00000</li>
						  	  <li><span>Fax :</span> +00 000 00000</li>
				 		  </ul>
				    </div>
			   </div>
			<div class="footer-grid twitts">
				<h3>Latest Tweets</h3>
				<p><label>@Lorem ipsum</label>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<span>10 minutes ago...</span>
				<p><label>@consectetur</label>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<span>15 minutes ago...</span>
			</div>
			<div class="footer-grid center-grid">
				<h3>Recent posts</h3>
				<ul>
					<li><a href="#">eiusmod tempor incididunt</a></li>
					<li><a href="#">adipisicing elit, sed</a></li>
					<li><a href="#">mod tempor incididunt ut</a></li>
					<li><a href="#">dipisicing elit, sed do</a></li>
					<li><a href="#">econsectetur adipisicing</a></li>
				</ul>
			</div>		
			<div class="footer-grid">
				<h3>DID YOU KNOW?</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
				<a href="#">ReadMore</a>
			</div>
			<div class="clear"> </div>
		</div>
	</div>
	<div class="copy-right">
		<p>Design by W3layouts. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
		 <!---End-footer---->
	</body>
</html>

